<template>
  <div>
    <div class="lodingbox">
      <img src="@/images/lodinginde.png" alt="" />
    </div>
    <div class="lodingtitlebox">
      <div class="head_text">信号传递特性STP检测虚拟仿真教学系统</div>
      <div class="head_texts">信号传递特性STP检测虚拟仿真教学系统</div>
    </div>
    <div class="jdtbox">
      <img src="@/images/jdt.png" alt="" class="jdtbj" />
      <div class="jdboxstart">
        <img
          :style="{ width: progress + '%' }"
          src="@/images/zjd.png"
          alt=""
          class="jdboxstartimg"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WorkspaceJsonLoaDing',

  data() {
    return { progress: 0 }
  },

  mounted() {
    this.startProgress()
  },

  methods: {
    startProgress() {
      let progressInterval = setInterval(() => {
        if (this.progress < 100) {
          this.progress += 100 / 30 // 100% / 3秒，30帧
        } else {
          clearInterval(progressInterval) // 动画结束
          this.$router.push({
            name: 'index'
          })
        }
      }, 100) // 每100ms更新一次
    }
  }
}
</script>

<style scoped>
.lodingtitlebox {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1200px;
}
.lodingtitlebox .head_text {
  font-size: 60px !important;
}
.lodingtitlebox .head_texts {
  font-size: 60px !important;
}
</style>
